<template>
    <div id="app">
        <div id="list-demo" class="demo">
            <button v-on:click="add">ADD</button>
            <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
            </transition-group>
        </div>
    </div>
</template>
<script>

    export default {
        name: 'App',
        data: function () {
            return {
                items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                nextNum: 10
            }
        },
        created() {
            window.timer = setInterval(() => {
                setTimeout(this.add(), 0)
            }, 1000)
        },

        methods: {
            add() {
                this.items.unshift(this.nextNum++)
            },
        },
        beforeDestroy() {
            clearInterval(timer)
        }
    }
</script>
<style>
    .list-item {
        display: inline-block;
        margin-right: 10px;
        background-color: orange;
        width: 60px;
        height: 60px;
        text-align: center;
        color: #ffffff;
    }

    .list-enter-active {
        transition: all 1s;
    }

    .list-enter {
        opacity: 0;
        /*transform: translateX(-30px);*/
        /*感觉从上面下来好看些*/
        transform: translateY(-30px);

    }
</style>
